<template>
	<view class="page_box1">
		<view class="flex justify-between align-center" style="width: 100%; height: 150rpx;" @tap="goRouter">
			<view class="">
				<u-icon name="arrow-left"></u-icon>
			</view>
			<view class="">
				拼团详情
			</view>
			<view class="">
			</view>
		</view>
		<view class="flex justify-between">
			<!-- <view class="flex" style="opacity: 0.5;border-radius: 10%;">
				<view class="" style="width: 50rpx; height: 50rpx; border-radius: 25rpx;">
					<image class="image1" src="../../../cdn-imgs/cdn-imgs/ali_pay.png" mode=""></image>
				</view>
				<view class="" style="margin-left: 20rpx;">
					噗**人...拼团成功!
				</view>
			</view> -->
			<view class="">
				<u-count-down separator-color="#fff" color="#D71D20" :timestamp="grouponDetail.expiretime"></u-count-down>
				<text style="margin-left: 10rpx;">后结束</text>
			</view>
		</view>







		<view class="center-header">
			 <!-- v-for="(item, index) in grouponDetail.goods" :key="index" -->
			<view class="header-text">
				<view class="header-image">
					<image :src="grouponDetail.goods.image" mode=""></image>
				</view>
				<view class="f12">
					<view class="" style="line-height: 40rpx;margin-left: 20rpx;margin-right: 10rpx;">
						{{grouponDetail.goods.title}}
					</view>
					<view class="flex align-center">
						<view class="" style="color: #FF0101; margin: 10rpx 10rpx 10rpx 20rpx;">
							拼团价：￥ {{grouponDetail.goods.groupon_price}}
						</view>
						<view class="line-through">￥{{grouponDetail.goods.original_price}}</view>
						<!-- <view class="" style="display: flex;justify-content: space-between;align-items: center;"> -->
						<!-- <view class="" style="padding: 16rpx 27rpx; background-color: #FFA77F; color: #fff; border-radius: 40rpx;">
								去拼团
							</view> -->
						<!-- </view> -->
					</view>
				</view>
			</view>
			<view class="" style="border-bottom: 1rpx solid #EEEEEE; width: 96%; height: 1rpx; margin: 20rpx auto;">
			</view>
			<view class="flex align-center justify-between">
				<text class="f10"
					style="padding: 10rpx 40rpx; color: #FE5C03; background-color: #FFEFE5; margin: 10rpx 0;display: inline-block;border-radius: 10rpx;">
					<!-- 已团{{item.sales}}件 剩余{{item.stock}}件 -->
					已有{{grouponDetail.activityGrouponscount}}人参与拼团
				</text>
				<view class="f10" style="color: #232323;margin-right: 20rpx;" @tap="jump1('/pages/public/poster/index?posterType='+'user')">
					<u-icon name="share" style="margin-right: 10rpx;"></u-icon>
					分享
				</view>
			</view>
		</view>



		<!-- 拼团人数 -->
		<view class="heaser-phone">
			<view class="f10" style="color: #000; padding: 40rpx 0 0; text-align: center;">
				还差{{grouponDetail.num - grouponDetail.current_num}}人,满员后即有机会拼团成功
			</view>
			<view class="group-people x-f">
				<view class="img-box" v-for="(team, index) in arr" :key="team.id">
					<view class="tag" v-if="index == 0">团长</view>
					<image class="avatar" :class="{ leader: index == 0 }" :src="team" mode="aspectFill">
					</image>
				</view>
				<view class="img-box" v-for="base in surplusNum" :key="base"><image class="avatar" src="/static/imgs/groupon/base_groupon.png" mode="aspectFill"></image></view>
			</view>
			
			<!-- <view class="group-people x-f">
				<view class="img-box" v-for="(team, index) in fromList.goods.images" :key="team.index">
					<view class="tag" v-if="index == 0">团长</view>
					<image class="avatar" :class="{ leader: index == 0 }" :src="team" mode="aspectFill"></image>
				</view>
				<view class="img-box" v-for="base in surplusNum" :key="base"><image class="avatar" src="/static/imgs/groupon/base_groupon.png" mode="aspectFill"></image></view>
			</view> -->
			
			
			
			<view class="f12 bg-gradual-red1" style="width: 80%; height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				border-radius: 35rpx;
				margin: 0 auto 10rpx;" @tap="confirm">
				立即参团
			</view>
			<view class="flex justify-between"
				style="color: #000000; padding-top: 10rpx; border-top: 1rpx solid #EEEEEE; margin: 20rpx auto; width: 90%;">
				<view class="">
					拼团规则
				</view>
				<view class="">
					<!-- 详细规则 -->
				</view>
			</view>
			<view class="bgc-top">
				<view class="" style="margin: 10rpx 5rpx;">
					<view class="bgc-top-image">
						<image src="../../../static/xing.png" mode=""></image>
					</view>
					<view class="">
						选择心仪商品
					</view>
				</view>
				<view class="">
					<view class="">
						<u-icon name="arrow-rightward" color="#CBCBCB"></u-icon>
					</view>
					<view class="">
					</view>
				</view>
				<view class="">
					<view class="bgc-top-image">
						<image src="../../../static/zhifu.png" mode=""></image>
					</view>
					<view class="">
						支付商品金额
					</view>
				</view>
				<view class="">
					<view class="">
						<u-icon name="arrow-rightward" color="#CBCBCB"></u-icon>
					</view>
					<view class="">

					</view>
				</view>
				<view class="">
					<view class="bgc-top-image">
						<image src="../../../static/fanli.png" mode=""></image>
					</view>
					<view class="">
						补贴返利1%
					</view>
				</view>
			</view>

		</view>




		<view class="btn-cent" style="color: #000000;">
			<view class="flex align-center justify-between f12">
				<view class="">
					参与拼团赢奖励
				</view>
				<view class="" style="color: #717171;">
					参与拼团越多，获奖几率越高
				</view>
			</view>
			<view class="flex bottm align-center" style="margin-top: 20rpx;">
				<view class="bottm-image">
					<image src="../../../static/xj.png" mode=""></image>
				</view>
				<view class="">
					<view class="f14">
						小奖
					</view>
					<view class="f10" style="margin-top: 6rpx;">
						每8次拼中则有几率获得现金红包一个
					</view>
				</view>
			</view>


			<view class="flex bottm align-center" style="margin-top: 20rpx;">
				<view >
					<image class="bottm-image" src="../../../static/dj.png" mode=""></image>
				</view>
				<view class="">
					<view class="f14">
						大奖
					</view>
					<view class="f10" style="margin-top: 6rpx;">
						每10次拼中，可以参与排队抽奖一次，中奖会获得10倍支付金额的大奖!
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				time: 0,
				grouponDetail: {},
				showShare: false,
				showSku: false,
				activity: {},
				surplusNum: 0, //剩余拼团人数、
				fromList: {},
				buyType: 'buy',
				is_all: 0,
				goodsId: '',
				arr: [],
			};
		},
		computed: {},
		onLoad(e) {
			console.log(e.id)
			this.goodsId = e.id
			// this.fromList = uni.getStorageSync('grouponInfo')
			this.getGrouponDetail(e.id)
		},
		onShow() {

		},
		onPullDownRefresh() {},
		methods: {
			countDown(t) {
				let _self = this;
				let timer = setInterval(() => {
					if (t > 0) {
						_self.time = _self.$tools.formatToHours(t);
						t--;
					} else {
						clearInterval(timer);
						_self.time = false;
					}
				}, 1000);
			},
			
			// 拼团详情
			getGrouponDetail(id) {
				let that = this;
				that.$api('goods.grouponDetail', {
					id: id
				}).then(res => {
					// uni.stopPullDownRefresh();
					that.grouponDetail = res.data;
					that.shoppingId = that.grouponDetail.goods_id
					that.sku_price_id = that.grouponDetail.goods.sku_price[0].id
					console.log(that.grouponDetail.goods_id,'1111111111')
					console.log(that.grouponDetail.goods.sku_price[0].id,'222')
					that.activity = res.data.goods.activity;
					that.arr = []
					that.grouponDetail.groupon_log.forEach((i => {
						if (i.user_avatar) {
							that.arr.push(i.user_avatar)
						}
					}))
					
					
					if (that.activity) {
						that.activity.richtext_id = parseInt(that.activity.richtext_id);
					}
					that.surplusNum = res.data.num - res.data.current_num;
					// let newTime = new Date().getTime();
					// let endTime = res.data.expiretime * 1000;
					// let t = endTime - newTime;
					// that.countDown(t / 1000);
					// that.setShareInfo({
					// 	query: {
					// 		url: 'groupon-' + id
					// 	},
					// 	// title: that.grouponDetail.goods.title,
					// 	// image: that.grouponDetail.goods.image
					// });
				});
			},

			jump1(data) {
				this.$tools.routerTo(data);
				console.log(data)
			},

			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// 立即购买
			confirmBuy() {
				let that = this;
				let confirmGoodsList = [];
				confirmGoodsList.push(that.confirmGoodsInfo);
				that.jump('/pages/order/confirm', {
					goodsList: JSON.stringify(confirmGoodsList),
					from: "cart",
					addressId: 0,
					couponId: 0,
					// grouponId:
					is_all: that.is_all,
					orderType: "goods",
					grouponBuyType: "groupon",
					buy_type: "groupon",
					grouponId: that.goodsId
				});
			},
			
			// 确定
			confirm() {
				this.confirmSku();
				this.confirmBuy();
			},
			
			// 确定规格
			confirmSku() {
				let that = this;
				console.log('1111',that.grouponDetail)
				that.confirmGoodsInfo = {
					goods_id: that.shoppingId,
					goods_num: 1,
					sku_price_id: that.sku_price_id,
					goods_price: that.grouponDetail.goods.groupon_price
				};
			},

			// 返回
			goRouter() {
				uni.navigateBack({
					delta: 1
				})
			},


		}
	};
</script>

<style lang="scss" scoped>
	.image1 {
		width: 100%;
		height: 100%;
		border-radius: 25rpx;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.page_box1 {
		width: 100%;
		height: 110vh;
		// padding-bottom: 500rpx;
		background: linear-gradient(#FF5A66, #FFA27F);
	}

	.head_box {
		background: url('http://shopro.7wpp.com/imgs/group_detail_bg.png') no-repeat;
		background-size: 100% 316rpx;
		padding: 60rpx 20rpx 20rpx;

		.center-bgc {
			padding: 0 30rpx;
		}
	}

	.page_box1 {
		color: #FFFFFF;
		padding: 0 20rpx;
	}

	.center-header {
		width: 100%;
		margin: 20rpx auto;
		border-radius: 20rpx;
		color: #000000;
		padding: 10rpx;
		background-color: #FFFFFF;

		.header-text {
			width: 100%;
			display: flex;

			.header-image {
				width: 150rpx;
				height: 150rpx;
			}
		}

		.original {
			font-size: 22rpx;
			font-weight: 400;
			text-decoration: line-through;
			color: rgba(153, 153, 153, 1);
			margin-left: 14rpx;
			// line-height: 22rpx;
			// margin-bottom: 10rpx;

			&:before {
				content: '￥';
				font-size: 20rpx;
			}
		}
	}

	.heaser-phone {
		border-radius: 20rpx;
		padding-bottom: 30rpx;
		background-color: #FFFFFF;

		// 头像
		.group-people {
			flex-wrap: wrap;
			padding: 50rpx;

			.img-box {
				position: relative;
				margin-right: 34rpx;

				// &:nth-child(6n) {
				// 	margin-right: 0;
				// }

				.tag {
					position: absolute;
					line-height: 36rpx;
					background: linear-gradient(132deg, rgba(243, 223, 177, 1), rgba(243, 223, 177, 1), rgba(236, 190, 96, 1));
					border-radius: 14rpx;
					padding: 0 10rpx;
					white-space: nowrap;
					font-size: 24rpx;
					color: #784f06;
					z-index: 2;
					top: -20rpx;
					left: 50%;
					transform: translateX(-50%);
				}

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background: #ccc;
				}

				.leader {
					border: 4rpx solid rgba(237, 195, 108, 1);
				}
			}
		}

		.bgc-top {
			width: 100%;
			height: 120rpx;
			z-index: 900;
			display: flex;
			align-items: center;
			border-radius: 20rpx;
			font-size: 22rpx;
			color: #000000;
			justify-content: space-around;

			.bgc-top-image {
				width: 36rpx;
				height: 40rpx;
				margin: 10rpx auto;
			}
		}

	}

	.btn-cent {
		width: 100%;
		margin: 10rpx auto 300rpx;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		background-color: #FFFFFF;

		.bottm {

			.bottm-image {
				width: 88rpx;
				height: 88rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>
